import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { segmentDefaultProps } from './defaultProps';
import type { SegmentOptions } from './type';
import SegmentInline from './SegmentInline';
import SegmentGroup from './SegmentGroup';

export interface SegmentProps extends SegmentOptions, Omit<HTMLAttributes<HTMLDivElement>, 'placeholder' | 'color'> {}

interface SegmentInterface extends FC<SegmentProps> {
  Inline: typeof SegmentInline;
  Group: typeof SegmentGroup;
}

const Segment: SegmentInterface = (props) => {
  const {
    className,
    placeholder,
    raised,
    stacked,
    piled,
    vertical,
    color,
    secondary,
    tertiary,
    disabled,
    loading,
    inverted,
    attached,
    padded,
    fitted,
    compact,
    circular,
    clearing,
    floated,
    aligned,
    basic,
    scrolling,
    children,
    forwardedRef,
    ...segmentProps
  } = props;

  return createElement(
    'div',
    {
      ref: forwardedRef,
      className: classNames(
        'ui',
        stacked,
        { stacked, placeholder, raised, piled, vertical, secondary, tertiary, disabled, inverted },
        color,
        'segment',
        loading,
        { loading },
        attached,
        { attached },
        padded,
        { padded },
        fitted,
        { fitted, compact, circular, clearing },
        floated,
        { floated },
        aligned,
        { aligned, basic },
        scrolling,
        { scrolling },
        className,
      ),
      ...segmentProps,
    },
    children,
  );
};

Segment.displayName = 'Segment';
Segment.defaultProps = segmentDefaultProps;

Segment.Inline = SegmentInline;
Segment.Group = SegmentGroup;

export default Segment;
